<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div id="app">
      <ul class="list-group">
        <li class="list-group-item active">原有数组：</li>
        <li class="list-group-item">
          <span class="badge badge-primary" v-for="item in num">{{item}} </span>
        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-success" @click="getnum_filter">
            数组中小于5的数(FILTER)
          </button>
        </li>
        <li class="list-group-item">
          <span class="badge badge-success" v-for="item in num1">{{item}}</span>
        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-danger" @click="getnum_map">
            数组乘以2(MAP)：
          </button>
        </li>
        <li class="list-group-item">
          <span class="badge badge-danger" v-for="item in num2">{{item}}</span>
        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-danger" @click="getnum_reduce">
            数组求和（reduce）：
          </button>
        </li>
        <li class="list-group-item">
          <span class="badge badge-danger">{{num3}}</span>
        </li>
        <li class="list-group-item">
          <button type="button" class="btn btn-dark" @click="getnum0">
            数据清空
          </button>
        </li>
      </ul>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          num: [1, 2, 3, 4, 5, 6, 7, 8],
          num1: [],
          num2: [],
          num3: null
        },
        methods: {
          getnum_filter() {
            // filter函数的使用
            //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            this.num1 = this.num.filter(function(n) {
              return n < 5
            })
          },
          getnum_map() {
            //map函数的使用
            //map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
            //map() 方法按照原始数组元素顺序依次处理元素。
            this.num2 = this.num.map(function(n) {
              return n * 2
            })
          },
          getnum_reduce() {
            //reduce函数的使用
            //educe() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
            //reduce() 可以作为一个高阶函数，用于函数的 compose。
            this.num3 = this.num.reduce(function(total, n) {
              //total是上一次返回的值
              return total + n
            }, 0)
          },
          getnum0() {
            this.num1 = []
            this.num2 = []
            this.num3 = null
          }
        }
      })
    </script>
  </body>
</html>
